<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vuex的学习</title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<link rel="stylesheet" href="css/animate.css" />
	<script src="js/vue.js"></script>
	<script src="js/vuex.js"></script>
	<script src="js/jquery-1.11.2.js"></script>
	<style>
     body{
	background: #eee;
     	padding-bottom:40px;
     }
   </style>
</head>
<body> 
	 <div class="container" id="app">
        <h1>Vue2.0 Vuex的学习</h1>
        <lbfcom></lbfcom>
	 </div>
	  

    
	 
</body>
</html>
<script>
  const store = new Vuex.Store({
	  state : {
		  count : 0		  
	  },
	  mutations:{
		addCount : function(state){
			state.count++;  
		}  
	  }	 
  });

  store.commit('addCount'); //提交时间出发状态  触发Vuex.sotre对象中的addCount函数 count的数据增加1
  store.commit('addCount');
  store.commit('addCount');
  
  
     new Vue({
    	 el : "#app",
    	 store : store,　// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
         components:{
        	 "lbfcom" : {
        		 template: "<div>Hello Word! <span>{{ message }}</span></div>",
        		 data :function(){
        			 return {
        				 message : this.$store.state.count   //使用这种方式 适用于模块化开发 不用频繁引入vuex
        			 }
        		 }
        	   } 
        	 
         }
     })


 
</script>
	

